<template>
  <div>
    <el-form label-width="80px" style="width: 400px; margin: 20px auto">
      <el-form-item label="电话号码">
        <el-input v-model="seciton.tbUser.phone" disabled></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="seciton.sname"></el-input>
      </el-form-item>
      <el-form-item label="所属医院">
        <el-input v-model="seciton.tbHospital.hname" disabled></el-input>
      </el-form-item>
      <el-form-item label="所属医院">
        <el-input v-model="seciton.tbDepartment.dname" disabled></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="seciton.gender" label="男">男</el-radio>
        <el-radio v-model="seciton.gender" label="女">女</el-radio>
      </el-form-item>
      <div class="demo-type">
        <el-form-item label="头像">
          <el-avatar shape="circle" :size="100">
            <img :src="seciton.headImg" alt="图片不存在" />
          </el-avatar>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8000/file-serv/upload"
            name="files"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :auto-upload="false"
            :headers="headrs"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
          </el-upload>
           <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getMyself, updateMyself } from "../api/SectionInfo";

export default {
  data() {
    return {
      seciton: {},
      fileList: [], //存放前端选取的文件的路径
      headrs: {
        token: sessionStorage.getItem("token"),
      },
    };
  },
  methods: {
    getSection() {
      getMyself().then((res) => {
        if (res.data.code == 200) {
          this.seciton = res.data.data;
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },

    //删除文件的时候会执行的函数
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //文件上传成功后，入参data指的是上传成功后服务器端响应回来的数据
    handleSuccess(data) {
        this.seciton.headImg=data;
        console.log(this.seciton.headImg)
        //将loginuser传递给服务器端进行修改
    },
    //是做文件上传
    submitUpload(){
        //立刻向el-upload的action属性指定的路径发起请求，并且携带指定的请求头
        this.$refs.upload.submit();//在做文佳上传，表示将前端的文件信息传递服务器端
         updateMyself(this.seciton).then(res=>{
            if(res.data.code==200){
                alert("修改成功");
            }
        })
    }
  },
  mounted() {
    this.getSection();
  },
};
</script>